<template>
  <div class="login-page">
    <div class="login-container fr">
      <!--标题头-->
      <div class="title">
        <span>欢迎登录品牌网</span>
        <span>还没账号？</span>
        <router-link to="/register" class="go_register">马上注册</router-link>
      </div>
      <!--登录表单-->
      <div class="login-form">
        <ul class="option">
          <li class="active" data-id="0" @click="changeLoginType">普通账号登录</li>
          <li data-id="1" @click="changeLoginType">手机动态密码登录</li>
        </ul>
        <!--登录名-->
        <input type="text" id="phone" v-model="form.account" placeholder="手机号码">
        <div class="change">
          <!--密码-->
          <input type="password" id="password" v-model="form.password" placeholder="登录密码">
          <!--验证码-->
          <div class="vcode clearfix">
            <input type="text" id="code" placeholder="手机验证码" v-model="form.code" class="code-input">
            <img v-if="showCode" :src="codeImage" width="120" height="44" class="fr" @click="refleshCode"/>
            <input v-if="showGetCode" type="button" class="get-code" value="获取验证码" @click="getPhoneCode"/>
          </div>
          <p class="code-error">{{error}}</p>
        </div>
        <button type="submit" class="do-event" id="login-sub" @click="toLogin">立即登录</button>
      </div>
      <!--第三方登录-->
      <div class="otherlogin">
        <div class="forget">
          <span>忘记密码了，</span>
          <router-link to="/retrieve/password">点击找回</router-link>
        </div>
        <p>——第三方登录——</p>
        <div class="loginicon">
          <a href=""><i class="iconfont icon-qq"></i></a>
          <a href=""><i class="iconfont icon-weixin"></i></a>
          <a href=""><i class="iconfont icon-weibo"></i></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {getCode} from '../../api/user'
export default {
  name: 'SinginComponent',
  mounted () {
    this.init()
  },
  data () {
    return {
      codeImage: '', // 后台传过来的验证码图片地址
      form: {
        account: '',
        password: '',
        code: ''
      },
      error: '', // 报错消息
      showCode: true, // 显示验证码
      showGetCode: false // 获取验证码
    }
  },
  methods: {
    ...mapActions([
      'handleLogin'
    ]),
    /**
     * 验证码刷新
     */
    refleshCode: function () {
      this.init()
    },
    /**
     * 提交登录
     */
    toLogin: function () {
      if (this.form.account === '') {
        this.$message('手机号不能为空')
        return
      }
      // 提交登录
      let obj = this.form
      this.handleLogin(obj).then(res => {
        console.log('handleLogin#')
        this.$router.push({
          path: '/home/',
          name: 'Home'
        })
      })
    },
    /**
       * 初始化
       * @returns {Promise<void>}
       */
    init: async function () {
      const promise = await getCode()
      this.codeImage = promise.codeImage
    },
    /**
     * 切换登录
     * @param ev
     */
    changeLoginType: function (ev) {
      ev = arguments[0] || event
      let target = ev.target || ev.srcElement
      let id = parseInt(target.dataset.id)
      let siblings = target.parentNode.children
      for (let i = 0; i < siblings.length; i++) {
        siblings[i].className = ''
      }
      target.className = 'active'
      if (id === 0) { // 普通账号登录
        this.showCode = true
        this.showGetCode = false
      } else {
        this.showCode = false
        this.showGetCode = true
      }
      this.init()
    },
    /**
     * 获取手机验证码
     */
    getPhoneCode: function (ev) {
      ev = arguments[0] || event
      let target = ev.target || ev.srcElement
      let countdown = 60 // 倒计时
      let time = setInterval(() => {
        target.value = countdown + '秒后失效'
        if (countdown <= 0) {
          clearInterval(time)
          target.value = '获取验证码'
        }
        countdown--
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
